import React, { memo,useEffect, useState } from 'react'
import Swiper from 'swiper'
import 'swiper/css/swiper.css'
import { RotationBox } from './DetailRotation.style.js'

function DetailRotation(props) {
    const { rotationImg=[]} = props
    const [imgIndex,setImgIndex]=useState(1)
    // console.log(Swiper)
    useEffect(() => {
        let swiper=null
        setTimeout(() => {
            swiper=new Swiper('.swiper-container', {
                loop: true,
                // resistance:true,
                direction: 'horizontal',
                autoplay: {
                    delay: 3000,
                    // disableOnInteraction:false
                },
                // observer:true,
                // observeSlideChildren:true,
                // centeredSlides:true,
                on:{
                    slideChangeTransitionEnd(){
                        let index=this.activeIndex;
                        if(index>rotationImg.length) index=1
                        setImgIndex(index)
                    }
                }
            })
        }, 100)

        return ()=>{
            swiper=null
        }

    }, [rotationImg])
    return (
        <RotationBox>
            <div className="swiper-container">
                <div className="swiper-wrapper">
                {
                    rotationImg.map((item, index) => {
                        return (
                            <div 
                            key={index}
                            className="swiper-slide">
                                    <img className="rotationChart-img" key={index}
                                     src={item} />
                            </div>
                        )
                    })
                }
                </div>
            </div>
            <div className="index">{imgIndex+"/"+rotationImg.length}</div>
        </RotationBox>
    )
}

export default memo(DetailRotation)
